<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Colspan Test</title>
        <style>
        table {
            border-collapse: collapse;
            width: 100%;
            margin: 20px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        .success {
            color: green;
        }
        .error {
            color: red;
        }
        .test-section {
            margin: 20px 0;
            padding: 10px;
            border: 1px solid #ccc;
        }
    </style>
    </head>
    <body>
        <h1>Colspan Functionality Test</h1>

        <div class="test-section">
            <h2>Test Table with Colspan</h2>
            <table id="test-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Age</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Address</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td colspan="2">John Doe</td>
                        <td>30</td>
                        <td>john@example.com</td>
                        <td>555-1234</td>
                        <td>123 Main St</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Jane</td>
                        <td>Smith</td>
                        <td>25</td>
                        <td colspan="2">jane@example.com</td>
                        <td>456 Oak Ave</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Bob</td>
                        <td>Johnson</td>
                        <td>35</td>
                        <td>bob@example.com</td>
                        <td>555-5678</td>
                        <td>789 Pine Rd</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td colspan="3">Alice Brown</td>
                        <td>alice@example.com</td>
                        <td>555-9012</td>
                        <td>321 Elm St</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="test-section">
            <h2>Test Results</h2>
            <div id="results"></div>
        </div>

        <script type="module">
        import {DataTable} from "../../dist/module.js"

document.addEventListener("DOMContentLoaded", () => {
            const results = document.getElementById("results")

    try {
                const dt = new DataTable("#test-table", {
                    searchable: true,
                    sortable: true,
                    perPage: 10
                })

        // Test 1: Verify data structure integrity
        const headingsCount = dt.data.headings.length
        const expectedHeadings = 7 // ID + First Name + Last Name + Age + Email + Phone + Address

        const test1Passed = headingsCount === expectedHeadings
        results.innerHTML += `<p class="${test1Passed ? "success" : "error"}">
                    Test 1: Headings count - Expected: ${expectedHeadings}, Actual: ${headingsCount}
                    ${test1Passed ? "✓ PASS" : "✗ FAIL"}
        </p>`

        // Test 2: Verify all rows have correct number of cells
        let test2Passed = true
        dt.data.data.forEach((row, index) => {
                    if (row.cells.length !== headingsCount) {
                        test2Passed = false
                        results.innerHTML += `<p class="error">
                            Row ${index} has ${row.cells.length} cells but headings has ${headingsCount}
                </p>`
                    }
                })
        results.innerHTML += `<p class="${test2Passed ? "success" : "error"}">
                    Test 2: Row cell count consistency ${test2Passed ? "✓ PASS" : "✗ FAIL"}
        </p>`

        // Test 3: Verify placeholder cells are marked correctly
        let test3Passed = true
        let placeholderCount = 0

        // Check headings for placeholders
        dt.data.headings.forEach((heading, index) => {
                    if (heading.attributes && heading.attributes["data-colspan-placeholder"] === "true") {
                        placeholderCount++
                        if (heading.text !== "" || heading.data !== "") {
                            test3Passed = false
                            results.innerHTML += `<p class="error">
                                Heading placeholder at index ${index} should be empty
                    </p>`
                        }
                    }
                })

        // Check data cells for placeholders
        dt.data.data.forEach((row, rowIndex) => {
                    row.cells.forEach((cell, cellIndex) => {
                        if (cell.attributes && cell.attributes["data-colspan-placeholder"] === "true") {
                            placeholderCount++
                            if (cell.text !== "" || cell.data !== "" || cell.order !== "") {
                                test3Passed = false
                                results.innerHTML += `<p class="error">
                                    Cell placeholder at row ${rowIndex}, col ${cellIndex} should be empty
                        </p>`
                            }
                        }
                    })
        })

        results.innerHTML += `<p class="${test3Passed ? "success" : "error"}">
                    Test 3: Placeholder cells ${test3Passed ? "✓ PASS" : "✗ FAIL"} (${placeholderCount} placeholders found)
        </p>`

        // Test 4: Test sorting with colspan data
        let test4Passed = true
        try {
                    dt.columns.sort(1, "asc") // Sort by first name column
                    results.innerHTML += `<p class="success">
                Test 4: Sorting with colspan data ✓ PASS
            </p>`
        } catch (error) {
                    test4Passed = false
                    results.innerHTML += `<p class="error">
                        Test 4: Sorting failed - ${error.message}
            </p>`
        }

                // Test 5: Test searching with colspan data
                let test5Passed = true
        try {
                    const searchResults = dt.search("John")
                    results.innerHTML += `<p class="success">
                        Test 5: Searching with colspan data ✓ PASS (${searchResults} results found)
            </p>`
        } catch (error) {
                    test5Passed = false
                    results.innerHTML += `<p class="error">
                        Test 5: Searching failed - ${error.message}
            </p>`
        }

                // Test 6: Verify colspan attributes are preserved
                let test6Passed = true
        const originalTable = document.getElementById("test-table")
        const originalColspanCells = Array.from(originalTable.querySelectorAll("[colspan]"))

        originalColspanCells.forEach(originalCell => {
                    const originalColspan = parseInt(originalCell.getAttribute("colspan"))
                    if (originalColspan > 1) {
                        // Check if the first cell of the colspan has the original content
                        const cellText = originalCell.textContent.trim()
                        let found = false

                        dt.data.data.forEach(row => {
                            row.cells.forEach(cell => {
                                if (cell.text === cellText || (cell.data && String(cell.data).includes(cellText))) {
                                    found = true
                                }
                            })
                        })

                        if (!found) {
                            test6Passed = false
                            results.innerHTML += `<p class="error">
                                Colspan content "${cellText}" not found in data
                    </p>`
                        }
                    }
                })

        results.innerHTML += `<p class="${test6Passed ? "success" : "error"}">
                    Test 6: Colspan content preservation ${test6Passed ? "✓ PASS" : "✗ FAIL"}
        </p>`

        // Summary
        const allTestsPassed = test1Passed && test2Passed && test3Passed && test4Passed && test5Passed && test6Passed
        results.innerHTML += `<h3 class="${allTestsPassed ? "success" : "error"}">
                    ${allTestsPassed ? "All tests passed! ✓" : "Some tests failed! ✗"}
        </h3>`

        // Debug info
        results.innerHTML += `<details>
                    <summary>Debug Information</summary>
                    <pre>Headings: ${JSON.stringify(dt.data.headings.map(h => h.text || h.data), null, 2)}</pre>
                    <pre>Headings count: ${dt.data.headings.length}</pre>
                    <pre>Data rows: ${dt.data.data.length}</pre>
                    <pre>First row cells: ${dt.data.data[0].cells.length}</pre>
        </details>`

    } catch (error) {
                results.innerHTML = `<p class="error">Error initializing DataTable: ${error.message}</p>`
        console.error("Test error:", error)
    }
        })
    </script>
    </body>
</html>
